<template>
  <div class="match-aide">
    <app-bar
      type="match"
      back
      title="配将助手"
      v-if="from === 'ios' || from === 'android'"
    ></app-bar>
    <app-bar
      type="match"
      title="配将助手"
      v-else-if="from === 'vivo'"
    ></app-bar>
    <app-bar v-else type="match" logo title="配将助手"></app-bar>
    <div class="content" v-if="!alldataLoading">
      <!-- 我的武将 -->
      <my-heroes></my-heroes>
      <!-- 页面tab切换 -->
      <div class="page_tab">
        <div class="item" :class="{ active: pageTab == 'forms' }">
          <img
            src="../../../assets/forms.svg"
            onload="SVGInject(this)"
            class="type-icon"
            alt=""
          />
          武将阵容
        </div>
        <div
          class="item"
          :class="{ active: pageTab == 'match' }"
          @click="noFun"
        >
          <img
            src="../../../assets/zs.svg"
            onload="SVGInject(this)"
            class="type-icon"
            alt=""
          />配将助手
        </div>
      </div>
      <!-- 搜索框 -->
      <div class="box">
        <div class="search">
          <div class="icon">
            <img src="../../../assets/ss.svg" alt="" />
          </div>
          <form action @submit.prevent="keypress">
            <input
              type="search"
              ref="searchInput"
              v-model="search"
              placeholder="请输入武将名称"
              @focus="searchFocus = true"
              @blur="searchFocus = false"
            />
          </form>
          <div
            class="clear"
            v-if="search"
            @click="
              search = '';
              showSearch = false;
              getFormsList();
            "
          >
            <img src="../../../assets/clear.svg" alt="" />
          </div>
          <collapse-transition>
            <div
              class="more"
              v-if="search && searchFocus && searchNames.length"
              :style="{
                height: '1.2rem',
              }"
            >
              <!-- <vue-scroll> -->
              <vue-custom-scrollbar class="scroll-area" :settings="settings">
                <div
                  class="item"
                  @click="setSearchName(item)"
                  v-for="(item, i) in searchNames"
                  :key="i"
                >
                  <img src="../../../assets/ss.svg" onload="SVGInject(this)" />
                  <div v-html="searchName(item.name)"></div>
                </div>
                <!-- </vue-scroll> -->
              </vue-custom-scrollbar>
            </div>
          </collapse-transition>
        </div>
        <div class="list_tab" v-show="!showSearch">
          <div
            class="item"
            @click="formsListType = 'hots'"
            :class="{ active: formsListType === 'hots' }"
          >
            热门
          </div>
          <div
            class="item"
            @click="formsListType = 'recom'"
            :class="{ active: formsListType === 'recom' }"
          >
            推荐
          </div>
          <div
            class="item"
            @click="formsListType = 'coll'"
            :class="{ active: formsListType === 'coll' }"
          >
            收藏
          </div>
          <div
            class="item"
            @click="formsListType = 'my'"
            :class="{ active: formsListType === 'my' }"
          >
            我的
          </div>
          <div class="active_line" :class="{ [formsListType]: 1 }"></div>
          <div class="flex"></div>
          <div class="publish" @click="publish">+ 发布阵容</div>
        </div>
        <van-tabs
          v-model="formsListType"
          class="list_tab_box"
          v-show="!showSearch"
        >
          <van-tab title="热门" name="hots">
            <div class="loading" v-if="formsLoading">
              <van-loading color="#1989fa" />
            </div>
            <div class="list">
              <team-box
                v-model="forms.hots.list[i]"
                bottom
                :down="false"
                v-for="(form, i) in forms.hots.list"
                :key="i"
              ></team-box>
            </div>
          </van-tab>
          <van-tab title="推荐" name="recom">
            <div class="empty" v-if="!loginStatus">
              <img src="../../../assets/kong.png" alt="" />
              <span>您还没有登录，无法获取到相关数据</span>
              <button @click="checkLogin">立即登录</button>
            </div>
            <div class="loading" v-if="formsLoading">
              <van-loading color="#1989fa" />
            </div>
            <div
              class="empty"
              v-if="loginStatus && !forms.recom.list.length && !formsLoading"
            >
              <img src="../../../assets/kong.png" alt="" />
              <span>武将太少没有数据，快去点亮吧</span>
              <button @click="$router.push('/enlist')">点亮我的武将</button>
            </div>
            <div class="list">
              <team-box
                v-model="forms.recom.list[i]"
                bottom
                own
                v-for="(form, i) in forms.recom.list"
                :key="i"
              ></team-box>
            </div>
          </van-tab>
          <van-tab title="收藏" name="coll">
            <div class="empty" v-if="!loginStatus">
              <img src="../../../assets/kong.png" alt="" />
              <span>您还没有登录，无法获取到相关数据</span>
              <button @click="checkLogin">立即登录</button>
            </div>
            <div class="loading" v-if="formsLoading">
              <van-loading color="#1989fa" />
            </div>
            <div
              class="empty"
              v-if="loginStatus && !forms.coll.list.length && !formsLoading"
            >
              <img src="../../../assets/kong.png" alt="" />
              <span>还没有收藏过阵容</span>
            </div>
            <div class="list">
              <team-box
                v-model="forms.coll.list[i]"
                bottom
                coll
                @remove="forms.coll.list.splice(i, 1)"
                v-for="(form, i) in forms.coll.list"
                :key="i"
              ></team-box>
            </div>
          </van-tab>
          <van-tab title="我的" name="my">
            <div class="list">
              <div class="empty" v-if="!loginStatus">
                <img src="../../../assets/kong.png" alt="" />
                <span>您还没有登录，无法获取到相关数据</span>
                <button @click="checkLogin">立即登录</button>
              </div>
              <div class="loading" v-if="formsLoading">
                <van-loading color="#1989fa" />
              </div>
              <div
                class="empty"
                v-if="loginStatus && !forms.my.list.length && !formsLoading"
              >
                <img src="../../../assets/kong.png" alt="" />
                <span>还没有发布过阵容</span>
                <button @click="publish">发布我的阵容</button>
              </div>
              <team-box
                v-model="forms.my.list[i]"
                bottom
                del
                @remove="forms.my.list.splice(i, 1)"
                v-for="(form, i) in forms.my.list"
                :key="i"
              ></team-box>
            </div>
          </van-tab>
        </van-tabs>
        <div class="list" style="margin-top: 0.13rem" v-if="showSearch">
          <team-box
            v-model="forms.search.list[i]"
            bottom
            downtext="更多阵容请进入GankeAPP查看"
            :down="
              i == 0 ? false : i == forms.search.list.length - 1 ? true : false
            "
            v-for="(form, i) in forms.search.list"
            :key="i"
          ></team-box>
          <div class="empty" v-if="!forms.search.list.length">
            <img src="../../../assets/kong.png" alt="" />
            <span>搜索无结果</span>
            <button @click="publish">发布我的阵容</button>
          </div>
        </div>
      </div>
      <vivo-down></vivo-down>
    </div>
    <div class="login" v-else>
      <van-loading color="#1989fa" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MyHeroes from "./MyHeroes.vue";
import TeamBox from "@/components/TeamBox/TeamBox.vue";
import localStore from "@/libs/util.store";
export default {
  name: "FormsMatch",
  data() {
    return {
      pageTab: "forms",
      from: "",
      search: "",
      showSearch: false,
      searchNames: [],
      settings: {
        suppressScrollY: false,
        suppressScrollX: true,
        wheelPropagation: false,
      },
      searchFocus: false,
      formsListType: "hots",
      formsLoading: false,
      forms: {
        hots: { list: [], page: 0, nomore: false },
        recom: { list: [], page: 0 },
        coll: { list: [], page: 0 },
        my: { list: [], page: 0 },
        search: { list: [], page: 0 },
      },
    };
  },
  components: {
    MyHeroes,
    TeamBox,
  },
  watch: {
    formsListType() {
      this.forms[this.formsListType] = { list: [], page: 0, nomore: false };
      this.getFormsList();
    },
    async search() {
      if (!this.search) {
        this.searchNames = [];
        this.showSearch = false;
        this.forms[this.formsListType] = { list: [], page: 0, nomore: false };
        this.getFormsList();
        return;
      }
      let res = await this.api.NAME_TO_NAME(this.search);
      let heroes = [];
      res.forEach((item) => {
        this.heroesList.some((h) => {
          if (h.id === item.id) {
            heroes.push(h);
            return true;
          }
        });
      });
      this.searchNames = heroes.sort((a, b) => b.quality - a.quality);
      console.log(this.searchNames);
      // this.getSearchList();
    },
    "$route.path"() {
      // if (this.$route.path === "/match") {
      //   let heroe = localStore.getItem("match_heroe");
      //   console.log(123123123123, heroe);
      //   if (heroe) {
      //     this.forms.search = { list: [], page: 0 };
      //     this.search = heroe.name;
      //     this.showSearch = true;
      //     this.getFormsList();
      //     localStore.delItem("match_heroe");
      //   }
      // }
    },
    userHeroes() {
      if (this.formsListType === "recom") {
        this.$nextTick(() => {
          this.forms.recom = { list: [], page: 0, nomore: false };
          this.getFormsList();
        });
      }
    },
  },
  computed: {
    ...mapState("data", [
      "heroesList",
      "userHeroes",
      "alldataLoading",
      "loginStatus",
    ]),
  },
  created() {
    window.injectedAll.sendUv("三国志.战略版搭配");
    this.from = window.from;
    this.first = window.firstMatchPage || false;
    if (this.first) {
      window.firstMatchPage = true;
      this.$router.push("/forms/37");
      setTimeout(() => {
        this.$router.go(-1);
      }, 1);
    } else {
      this.loadData();
    }
  },
  activated() {
    console.log("activated");
    let heroe = localStore.getItem("match_heroe");
    window.shareData = null;
    window.injectedAll.shareInit("match");
    if (heroe) {
      this.search = heroe.name;
      this.showSearch = true;

      localStore.delItem("match_heroe");
      this.getFormsList();
    } else {
      // let heroe = localStore.getItem("match_heroe");
    }
  },
  deactivated() {
    console.log("deactivated");
    if (this.search) {
      // localStore.getItem("match_heroe");
    }
    // this.search = "";
    // this.showSearch = false;
    // console.log(window.routerback);
  },
  beforeRouteUpdate() {
    console.log("最初进入页面");
  },
  beforeRouteLeave(to, form, next) {
    next();
  },
  methods: {
    loadData() {
      console.log("created");
      let heroe = this.$route.query.name;
      if (heroe) {
        this.search = heroe;
        this.showSearch = true;
      }
      // localStore.delItem("match_heroe");
      this.getFormsList();
      this.event.on("handleScroll", this.handleScroll);
    },
    publish() {
      // console.log(this.forms);
      this.checkLogin();
      this.$router.push("/publish");
    },
    noFun() {
      this.Popups.Alert().noFun();
    },
    keypress() {
      this.$refs.searchInput.blur();
      this.showSearch = true;
      this.getSearchList();
      return false;
    },
    async getFormsList() {
      let routerArr = ["FormsMatch", "FormsMatchName"];
      if (this.formsLoading || routerArr.indexOf(this.$route.name) === -1)
        return;
      this.formsLoading = true;
      if (!this.search) {
        if (this.formsListType === "hots") {
          if (this.forms.hots.nomore && this.forms.hots.list.length)
            return (this.formsLoading = false);
          let list = await this.api
            .GET_HOTS_FORMS_LIST(this.forms.hots.page)
            .catch(console.log);
          list = list || [];
          this.forms.hots.list.push(...list);
          if (list.length) this.forms.hots.page += 1;
          else this.forms.hots.nomore = true;
        } else if (this.formsListType === "recom") {
          if (this.forms.recom.nomore && this.forms.recom.list.length)
            return (this.formsLoading = false);
          console.log("获取列表", this.forms.recom.page);
          let list = await this.api
            .GET_RECOM_FORMS_LIST(this.forms.recom.page)
            .catch(console.log);
          list = list || [];
          this.forms.recom.list.push(...list);
          if (list.length) this.forms.recom.page += 1;
          else {
            this.forms.recom.nomore = true;
            // this.$toast("没有更多内容了");
          }
        } else if (this.formsListType === "coll") {
          if (this.forms.coll.nomore && this.forms.coll.list.length)
            return (this.formsLoading = false);
          let list = await this.api
            .GET_COLL_FORMS_LIST(this.forms.coll.page)
            .catch(console.log);
          list = list || [];
          this.forms.coll.list.push(...list);
          if (list.length) this.forms.coll.page += 1;
          else {
            this.forms.coll.nomore = true;
            // this.$toast("没有更多内容了");
          }
        } else if (this.formsListType === "my") {
          if (this.forms.my.nomore && this.forms.my.list.length)
            return (this.formsLoading = false);
          let list = await this.api
            .GET_MY_FORMS_LIST(this.forms.my.page)
            .catch(console.log);
          list = list || [];
          this.forms.my.list.push(...list);
          if (list.length) this.forms.my.page += 1;
          else {
            this.forms.my.nomore = true;
            // this.$toast("没有更多内容了");
          }
        }
      } else {
        let list = await this.api
          .GET_SEARC_FORMS_LIST(this.search, this.forms.search.page)
          .catch(console.log);
        list = list || [];
        this.forms.search.list.push(...list);
        if (window.from == "web" || !window.from) {
          this.forms.search.list = this.forms.search.list.splice(0, 5);
          this.forms.search.nomore = true;
        }
        if (list.length) this.forms.search.page += 1;
        else {
          this.forms.search.nomore = true;
          // this.$toast("没有更多内容了");
        }
      }
      this.formsLoading = false;
    },
    handleScroll(data) {
      if (data.v.process > 0.9) {
        this.getFormsList();
      }
    },
    getSearchList() {
      this.forms.search = { list: [], page: 0 };
      this.getFormsList();
    },
    searchName(name) {
      let search = this.search;
      var reg = new RegExp(search.trim(), "g");
      let _name = name.replace(reg, "<span>" + search.trim() + "</span>");
      return _name;
    },
    setSearchName(item) {
      this.search = item.name;
      this.showSearch = true;
      this.getSearchList();
    },
  },
  beforeDestroy() {
    this.event.remove("handleScroll", this.handleScroll);
  },
};
</script>

<style lang="scss" scoped>
.match-aide {
  width: 100%;
  min-height: 100%;
  padding-top: 0.46rem;
  .content {
    padding: 0 0.16rem;
    .page_tab {
      height: 0.28rem;
      background: #f2f2f2;
      border-radius: 4px;
      padding: 0.02rem;
      display: flex;
      margin-bottom: 0.1rem;
      .item {
        cursor: pointer;
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.12rem;
        color: #333333;
        border-radius: 3px;
        ::v-deep {
          .type-icon {
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0rem;
            path {
              fill: #b2b2b2;
            }
          }
        }
        &.active {
          color: #ff8a69;
          background: #ffffff;
          ::v-deep {
            .type-icon {
              path {
                fill: #ff8a69;
              }
            }
          }
        }
      }
    }
    .loading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 0.8rem;
    }
    .empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 0.8rem;
      img {
        width: 0.73rem;
        margin-bottom: 0.09rem;
      }
      span {
        font-size: 0.14rem;
        color: #cccccc;
        line-height: 0.2rem;
      }
      button {
        margin-top: 0.23rem;
        width: 1.4rem;
        height: 0.32rem;
        cursor: pointer;
        border-radius: 0.18rem;
        border: 1px solid #ebebeb;
        font-size: 14px;
        background: #fff;
        outline: none;
        color: #333333;
      }
    }
    .box {
      .search {
        height: 0.34rem;
        border-radius: 4px;
        border: 1px solid #ebebeb;
        display: flex;
        align-items: center;
        position: relative;
        .more {
          position: absolute;
          width: 100%;
          background: #fff;
          border-radius: 0.05rem;
          box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
          top: calc(100% + 0.05rem);
          height: 1.2rem;
          z-index: 10;
          .scroll-area {
            height: 100%;
            ::v-deep {
              .ps__rail-y {
                width: 4px !important;
                background: rgba(0, 0, 0, 0) !important;
              }
              .ps__thumb-y {
                width: 4px !important;
                background: #e5e5e5 !important;
              }
            }
          }
          .item {
            width: 100%;
            height: 0.4rem;
            display: flex;
            align-items: center;
            font-size: 0.14rem;
            color: #333333;
            ::v-deep {
              span {
                color: #999999;
              }
              svg {
                margin: 0 0.05rem;
                path {
                  fill: #cccccc;
                }
              }
            }
          }
        }
        form {
          flex: 1;
          width: 0;
          height: 100%;
          input {
            width: 100%;
            height: 100%;
            border: none;
            font-size: 0.14rem;
            color: #233d4d;
            background: none;
            -webkit-appearance: none;
            &::placeholder {
              font-size: 0.12rem;
              color: #cccccc;
            }
            &::-webkit-search-cancel-button {
              -webkit-appearance: none;
            }
          }
        }

        .icon {
          width: 0.34rem;
          height: 0.34rem;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: 0.24rem;
          }
        }
        .clear {
          width: 0.3rem;
          height: 0.34rem;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          img {
            width: 0.22rem;
          }
        }
      }
      .list_tab {
        margin-top: 0.13rem;
        display: flex;
        align-items: center;
        height: 0.32rem;
        margin-bottom: 0.14rem;
        position: relative;
        .active_line {
          position: relative;
          position: absolute;
          height: 2px;
          width: 0.44rem;
          bottom: 0;
          left: 0;
          transition: all 0.3s;
          &.hots {
            left: 0;
          }
          &.recom {
            left: 0.44rem;
          }
          &.coll {
            left: 0.88rem;
          }
          &.my {
            left: 1.32rem;
          }
          &::before {
            content: "";
            display: block;
            width: 0.16rem;
            height: 2px;
            background: #ff8a69;
            border-radius: 1px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -0.08rem;
          }
        }
        .item {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 0.44rem;
          box-sizing: border-box;
          white-space: nowrap;
          padding: 0 0.1rem;
          height: 100%;
          font-size: 0.12rem;
          color: #8c8c8c;
          cursor: pointer;
          position: relative;
          transition: all 0.3s;
          &.active {
            color: #333333;
            font-weight: 600;
          }
        }
        .flex {
          flex: 1;
          width: 0;
        }
        .publish {
          width: 1.08rem;
          height: 0.32rem;
          background: #ff8a69;
          border-radius: 0.18rem;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          color: #ffffff;
        }
      }
      .list_tab_box {
        margin-top: 0.1rem;
        ::v-deep {
          .van-tabs__wrap {
            display: none;
          }
        }
      }
    }
  }
  .login {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
